import React, { useState } from "react";
import { Button, Input, Select, Space } from "antd";
import axios from "axios";
import md5 from "md5";
function Index() {
    const [list, setList] = useState<any>("");
    const [delto, setDelto] = useState<any>("it");
    const [result, setResult] = useState<any>('')

    const fanyi = () => {
        const salt = new Date().getTime();
        console.log("re3s");

        axios.get("/api/api", {
            params: {
                q: list,
                from: 'auto',
                to: delto,
                appKey: '5799aec3cfcfbe30',
                salt,
                sign: md5(`5799aec3cfcfbe30${list}${salt}wFmfcn9igpEEgx0QmCArjjLqKjVJceGT`)
            }
        }).then(res => {
            //因为translation 是一个数组，所以我们需要取数组的第一个元素
            console.log(res);

            console.log(res.data.translation[0])
            setResult(res.data.translation[0])
        })
    };

    return (
        <div>
            <Input
                value={list}
                style={{ width: "200px" }}
                onChange={(e) => setList(e.target.value)}
            />
            <p></p>

            <Select
                style={{ width: 120 }}
                value={delto}
                defaultValue="it"
                onChange={(value) => setDelto(value)}
                options={[
                    { value: "it", label: "意大利" },
                    { value: "en", label: "英语" },
                ]}
            />

            <Button onClick={fanyi}>翻译</Button>
            <h2>{result}</h2>
        </div>
    );
}

export default Index;
